import React, { useRef, useState, useEffect } from 'react'
import './Shop.css'
import { Button, SearchBar, Tabs, Toast, NavBar } from 'antd-mobile'
import axios from 'axios'
import { useNavigate, useLocation } from 'react-router-dom'
export default function Shop() {
    const navigate = useNavigate()
    const location = useLocation()
    const [thisdata, setThisdata] = useState(location.state.shopid)
    console.log(thisdata)
    const [shopcommodity, setShopcommodity] = useState([])
    const getshopcommodity = async () => {
        const res = await axios.get(`http://localhost:3000/getshopcommodity?_id=${thisdata._id}`).then((res) => {
            console.log(res.data.data);
            setShopcommodity(res.data.data)
        })

    }
    const back = () => {
        navigate(-1)
    }
    const [value, setValue] = useState('0');
    useEffect(() => {
        getshopcommodity()
    }, [])
    return (
        <div className='shop'>
            <div className='shop_top'>
                <NavBar onBack={back} >
                    <SearchBar placeholder='搜索商品' searchIcon={<img src="https://cdn8.axureshop.com/demo2024/2322481/images/%E9%A6%96%E9%A1%B5/u106.svg"></img>}
                        style={{
                            width: '99%',
                            '--height': '2.5rem',
                            '--border-radius': '2rem',
                        }} />
                </NavBar>
                <div className='shop_top_title'>
                    <div className='shop_top_title_div'>
                        <div className='shop_top_title_div_left'>
                            <img src={thisdata.shopimg}></img>
                            <div className='shop_top_name'>
                                <p onClick={()=>{navigate('/shopDetails',{state:thisdata})}}>{thisdata.name}
                                    <img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E5%BA%97%E9%93%BA/u1689.svg'></img>
                                </p>
                                <div>
                                    <span>关注{thisdata.concern}万</span>
                                    <span>已售{thisdata.sold}</span>
                                </div>
                            </div>
                        </div>
                        <div className='shop_top_title_div_right'>
                            <div className='shop_top_title_div_right_item' style={{
                                'marginBottom': '0.5rem'
                            }}>
                                +关注
                            </div>
                            <div className='shop_top_title_div_right_item'>
                                联系客服
                            </div>
                        </div>
                    </div>
                    <div className='shop_top_title_div2'>
                        {
                            thisdata.serve.map((item, index) => {
                                return (
                                    <div className='shop_top_title_div_but' key={index}>
                                        <span>{item.setname}</span>
                                    </div>
                                )
                            })
                        }

                    </div>
                </div>
            </div>
            <div className='shop_top_title_div3'>
                <Tabs style={{
                    '--active-line-color': 'rgba(174, 139, 86, 1)',
                    '--active-title-color': 'black',
                    '--title-font-size': '1rem',
                }} activeKey={value} onChange={(e) => { setValue(e); }}
                >
                    <Tabs.Tab title='推荐' key='0' />
                    <Tabs.Tab title='全部' key='1' />
                    <Tabs.Tab title='分类' key='2' />
                    <Tabs.Tab title='动态' key='3' />
                </Tabs>
            </div>
            <div className={value == '0' ? 'shop_center' : 'shop_center_none'}>
                <div className='shop_context'>
                    {
                        shopcommodity.slice(0, 4).map((item, index) => {
                            return (
                                <div className='shop_context_item' onClick={() => { StoreDetails(item) }} key={index}>
                                    <img src={item.img}></img>
                                    <p className='shop_context_item_name'>{item.name}</p>
                                    <div className='shop_context_item_price'>
                                        <p>￥{item.nowPrice}</p>
                                        <p className='shop_context_item_sold'>已售{item.sold}</p>
                                    </div>
                                </div>)
                        })
                    }
                </div>
            </div>
            <div className={value == '1' ? 'shop_center' : 'shop_center_none'}>
                <div className='shop_context'>
                    {
                        shopcommodity.map((item, index) => {
                            return (
                                <div className='shop_context_item' onClick={() => { StoreDetails(item) }} key={index}>
                                    <img src={item.img}></img>
                                    <p className='shop_context_item_name'>{item.name}</p>
                                    <div className='shop_context_item_price'>
                                        <p>￥{item.nowPrice}</p>
                                        <p className='shop_context_item_sold'>已售{item.sold}</p>
                                    </div>
                                </div>)
                        })
                    }
                </div>
            </div>
            <div className={value == '2' ? 'shop_center' : 'shop_center_none'}>
                {
                    thisdata.commotype.map((item, index) => {
                        return (
                            <div className='shop_type_item' key={index}>
                                <div className='shop_type_item_name'>
                                    <p>{item.typename}({item.commtypes.length})</p>
                                    <img src='https://cdn8.axureshop.com/demo2024/2322481/images/%E5%BA%97%E9%93%BA/u1708.svg'></img>
                                </div>
                                <div className='shop_type_item_content'>
                                    {
                                        item.commtypes.map(itema => {
                                            return (
                                                <div className='shop_type_item_content_item' key={itema}>
                                                    {itema}
                                                </div>
                                            )
                                        }
                                        )
                                    }
                                </div>
                            </div>
                        )
                    })
                }
            </div>
            <div className={value == '3' ? 'shop_center' : 'shop_center_none'}>
                <div className='shop_context'>
                    {
                        thisdata.dynamic.map((item, index) => {
                            return (
                                <div className='shop_context_item' onClick={() => { StoreDetails(item) }} key={index}>
                                    <img src={item.dyimg}></img>
                                    <p className='shop_context_item_name'>{item.dytext}</p>
                                    <div className='shop_context_item_shop'>
                                        <div style={{display: 'flex',alignItems: 'center'}}>
                                            <img src={thisdata.shopimg}></img>
                                            <span className='shop_context_item_sold'>{thisdata.name}</span>
                                        </div>
                                        <div className='shop_context_item_sold'>
                                            <img src="https://cdn8.axureshop.com/demo2024/2322481/images/%E5%B7%A5%E5%9D%8A%E8%AF%A6%E6%83%85/u213.svg"></img>
                                            <span>{item.thumbs}</span>
                                        </div>
                                    </div>
                                </div>)
                        })
                    }
                </div>
            </div>
        </div>
    )
}
